<template>
	<view style="height: 100%;">
		<view class="itemBox">
			<view class="list" v-for="(item,key) in myList" :key="key">
				<view class="item" @click="checkedItem(item.id)">
					<view class="chanp" style="margin-left: 20rpx;">
						<image :src="item.cardGoodsVo.goodsImage" mode="aspectFill"></image>
					</view>
					<view style="display: flex;flex-direction: column;justify-content: space-between;width: 100%;">
						<view class="item_title">{{item.cardGoodsVo.goodsName}}</view>
						<view
							style="font-size: 28rpx;display: flex;align-items: center;justify-content: space-between;">
							<view>
								X {{item.count}}
							</view>
							<view>
								<u--text type="error" size="30" :text="'￥'+item.payMoney"></u--text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="myList.length == 0" class="noList">
				<!-- <sys-noList title="哎呀！" subtitle="抱歉！暂无可查询的订单~~"></sys-noList> -->
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getOrderList
	} from '@/common/index.js'
	export default {
		data() {
			return {
				myList: [],
				navbar: 1,
				pageNum: 1,
				pageSize: 10,
				status: 0,
				orderStatus:0,
			};
		},
		onLoad(opt) {
			console.log(opt);
			this.orderStatus = opt.status
			this.queryOrderList()
		},
		onReachBottom() {
			if (this.pageNum >= this.pages) return;
			this.status = 'loading';
			this.pageNum = ++this.pageNum;
			setTimeout(() => {
				this.queryOrderList()
			}, 2000)
		},
		onPullDownRefresh() {
			this.pageNum = 1
			this.queryOrderList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 2000)
		},
		methods: {
			queryOrderList() {
				getOrderList(this.pageSize, this.pageNum, this.orderStatus).then(res => {
					this.pages = res.data.total
					this.myList = res.data.dataInfo
				})
			},
			checkedItem(id) {
				uni.navigateTo({
					url: '/pages/orderList/orderInfo?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.zhanwei {
		width: 100%;
		height: 88rpx;
	}

	.itemBox {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.topbg {
		width: 100%;
		// height: 388rpx;
		position: relative;
		z-index: 2;

		image {
			width: 100%;
			height: 100%;
		}

		&>image {
			position: absolute;
			z-index: -1;
			top: 0;
		}

		.bagtext {
			width: 372rpx;
			height: 88rpx;
			margin-left: 40rpx;
		}

		.navbar {
			display: flex;
			justify-content: space-between;
			height: 9rpx;
			line-height: 9rpx;
			width: 670rpx;
			margin: 24rpx auto;
			font-weight: 400;
			font-size: 28rpx;
			color: #535353;
		}
	}

	.navActive {
		color: #1F1F1F !important;
		font-weight: 600;
		background: #BEFD00;
	}

	.list {
		margin-top: 20rpx;
		margin-left: 32rpx;
		overflow: auto;
		width: 686rpx;
		background-color: #FFFFFF;
	}

	.btns {
		width: 100%;
		height: 164rpx;
		position: fixed;
		bottom: 0;
		background: linear-gradient(156.98deg, #F1F7FF -5.09%, rgba(255, 255, 255, 0) 72.98%);
		border-radius: 28rpx 28rpx 0px 0px;
		display: flex;
		justify-content: space-between;

		.customizeBlackButton {
			width: 256rpx;
			height: 88rpx;
			line-height: 88rpx;
			margin-top: 28rpx;
			margin-right: 28rpx;
		}

		.customizeWhiteButton {
			width: 176rpx;
			margin-top: 44rpx;
			margin-left: 28rpx;
		}

		image {
			width: 32rpx;
			height: 32rpx;
			vertical-align: middle;
			margin-top: -10rpx;
			margin-right: 10rpx;
		}

		.quanxuan {
			margin-left: 30rpx;
			font-size: 24rpx;
			position: relative;
			flex-grow: 1;
		}

		.quxiao {
			position: absolute;
			right: 48rpx;
			top: 60rpx;
			font-size: 28rpx;
		}
	}

	.item {
		width: 660rpx;
		height: 264rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 0 auto 16rpx;
		display: flex;
		padding: 32rpx;
		box-sizing: border-box;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}

		.chanp {
			width: 200rpx;
			height: 200rpx;
			background: #FFFFFF;
			border: 1px solid #F4F4F4;
			border-radius: 8rpx;
			margin-right: 40rpx;

			image {
				width: 184rpx;
				height: 184rpx;
				vertical-align: bottom;
				// margin-top: 8rpx;
				// margin-left: 8rpx;
			}
		}

		.item_title {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			font-size: 28rpx;
			color: #3E3E3E;
		}

		.item_grade {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;

			>view {
				height: 36rpx;
				line-height: 36rpx;
			}

			.money {
				image {
					width: 32rpx;
					height: 32rpx;
					vertical-align: middle;
					margin-right: 8rpx;
				}
			}
		}

		.group {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			left: 12rpx;
			top: 116rpx;
		}
	}
</style>